import {
    Alert,
    View,
    Text,
    Button,
    ScrollView,
    TextInput,
} from 'react-native';
import React, {Component} from 'react';
import {Icon} from '@rneui/themed';
import account from '../api/account';

export default class ForgotPassword extends Component {
    constructor(props) {
        super(props);
        this.state = {
            account: '',
            firstLogin: null,
            sendState: null,
        };
        this.onSendClick = this.onSendClick.bind(this);
    }

    componentDidMount() {
        let {route} = this.props;
        if (route.params) {
            let account = route.params.account;
            let firstLogin = route.params.firstLogin;
            this.setState({
                account: account,
                firstLogin: firstLogin,
            });
        }
    }

    async onSendClick() {
        if (StrUtils.isEmpty(this.state.account)) {
            return;
        }
        try {
            let sendState = await account.forgotPassword(this.state.account);
            this.setState({
                sendState: sendState
            })
        } catch (e) {
            Alert.alert(e.message, e.content);
        }
    }

    render() {
        return (
            <View
                style={{
                    height: '100%',
                }}>
                <View
                    style={{
                        alignItems: 'center',
                        justifyContent: 'center',
                        height: '30%',
                    }}>
                    <Text
                        style={{
                            fontWeight: 'bold',
                            color: '#262626',
                            fontSize: 24,
                            padding: 5,
                        }}>
                        密码找回
                    </Text>
                </View>
                <ScrollView>
                    <View
                        style={{
                            alignItems: 'center',
                            justifyContent: 'center',
                        }}>
                        {this.state.firstLogin && this.state.sendState === null ? (
                            <View
                                style={{
                                    width: '60%',
                                    padding: 5,
                                    backgroundColor: '#f6ffed',
                                    borderWidth: 1,
                                    borderColor: '#c2eea0',
                                }}>
                                <Text>
                                    账户:{this.state.account}
                                    ，用户首次登录，已发送邮件到您的邮件账户，请查看邮件确认账户信息，并使用邮件中的链接修改密码。如未收到邮件，请点击再次发送。
                                </Text>
                            </View>
                        ) : null}
                        {this.state.sendState && !this.state.firstLogin ? (
                            <View
                                style={{
                                    width: '60%',
                                    padding: 5,
                                    backgroundColor: '#f6ffed',
                                    borderWidth: 1,
                                    borderColor: '#c2eea0',
                                }}>
                                <Text>
                                    账户:{this.state.account}
                                    ，已发送邮件到您的邮件账户，请查看邮件确认账户信息，并使用邮件中的链接修改密码。如未收到邮件，请点击再次发送。
                                </Text>
                            </View>
                        ) : null}
                        {this.state.sendState === false ? (
                            <View
                                style={{
                                    width: '60%',
                                    padding: 5,
                                    backgroundColor: '#fffbe6',
                                    borderWidth: 1,
                                    borderColor: '#ffe9a4',
                                }}>
                                <Text>
                                    账户:{this.state.account}
                                    ，重置密码邮件发送失败，请联系管理员或点击发送再次尝试。
                                </Text>
                            </View>
                        ) : null}
                        {
                            !this.state.sendState && !this.state.firstLogin ? (
                                <View
                                    style={{
                                        width: '60%',
                                        margin: '1%',
                                        flexDirection: 'row',
                                        justifyContent: 'center',
                                        alignItems: 'center',
                                        borderWidth: 1,
                                        borderColor: '#00000072',
                                        height: 28,
                                    }}>
                                    <Icon
                                        name="user"
                                        size={16}
                                        color={'#00000072'}
                                        type="antdesign"
                                        style={{marginLeft: 3, marginRight: 3}}
                                    />
                                    <TextInput
                                        style={{
                                            width: '100%',
                                            height: '100%',
                                            borderWidth: 0,
                                            flex: 1,
                                            padding: 0,
                                        }}
                                        autoFocus={true}
                                        value={this.state.account}
                                        onChangeText={value => {
                                            this.setState({
                                                account: value,
                                            });
                                        }}
                                        placeholder={'请输入账号'}
                                        onSubmitEditing={() => {
                                        }}
                                    />
                                </View>
                            ) : null}

                        {!this.state.account ? (
                            <View style={{alignItems: 'flex-start', width: '60%'}}>
                                <Text style={{color: 'red', fontSize: 10}}>账号必填</Text>
                            </View>
                        ) : null}

                        <View
                            style={{
                                width: '60%',
                                margin: '1%',
                                marginTop: '3%',
                                flexDirection: 'row',
                                justifyContent: 'space-between',
                                alignItems: 'center',
                            }}>
                            <View style={{width: '100%'}}>
                                <Button
                                    title={
                                        !this.state.sendState && !this.state.firstLogin
                                            ? '点击发送'
                                            : '再次发送'
                                    }
                                    onPress={this.onSendClick}
                                    buttonStyle={{
                                        backgroundColor: '#2089dc',
                                        borderRadius: 30,
                                    }}
                                />
                            </View>
                        </View>
                    </View>
                </ScrollView>
            </View>
        )
    }
}
